<template>
<!-- 
el-table (父组件)
├── el-table-column (子组件1)
├── el-table-column (子组件2)
└── el-table-column (子组件3)
    └── template #default (插槽模板) 
-->
  <div>
    <h1>用户管理</h1>
    <el-table :data="users" border style="width: 100%;">
      <!-- 前三个列组件没有实际的组件内容，直接使用自闭和标签 -->
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" min-width="80" />
      <el-table-column prop="email" label="邮箱" min-width="120" />
      <!-- 头像这个列组件包含了图片，我们使用了作用域插槽来实现，当前作为父组件可以直接使用子组件传过来的数据，如下就在scope变量之中 -->
      <el-table-column prop="avatar" label="头像" width="100">
        <!-- 使用【作用域插槽】，插入自定义模板-此处为图片，代替纯文本 -->
        <!-- 此时scope接收子组件传递过来的数据，此处的子组件指的是 el-table-column -->
        <template #default="scope">
            <!-- 注意 preview-teleported 还必须设置为true，否则无法预览的时候遮罩层会被其他元素挡住 -->
          <div >
            <el-image 
            :src="scope.row.avatar" 
            alt="头像" 
            style="width: 50px; height: 50px; border-radius: 50%;" 
            :preview-src-list="[scope.row.avatar]" 
            fit="cover"
            :z-index="9999"
            :preview-teleported="true"
            />    
          </div>
          
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 使用【作用域插槽】，插入自定义模板，代替纯文本，此处也可以写成 v-slot:default="scope" -->
        <template v-slot="scope">
          <el-button @click="editUser(scope.row)">编辑</el-button>
          <el-button @click="deleteUser(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-button @click="createUser">创建用户</el-button> -->
  </div>

  <div class="pagination-container">
    <el-pagination background layout="prev, pager, next" :total="usersTotal" v-model:current-page="currentPage"/>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineProps } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import apiUris  from '@/../api/api.js' // 导入api模块
import request from '@/../api/request.js' // 导入request模块

// 接收父组件传递的配置数据
const props = defineProps({
  configs: {
    type: Object,
    default: () => ({})
  }
})

// 监听配置数据变化
watch(() => props.configs, (newConfigs) => {
  console.log('UserPage 接收到配置数据:', newConfigs)
  // 这里可以根据配置数据更新页面显示
}, { immediate: true, deep: true })
// const {proxy} = getCurrentInstance(); // 当前vue实例
// const testData = [
//   { id: 1, name: '张三', email: 'zhangsan@example.com', avatar: 'http://127.0.0.1:8080/images/country0x0.jpg' },
//   { id: 2, name: '李四', email: 'lisi@example.com', avatar: 'http://127.0.0.1:8080/images/free0x0.webp' },
//   { id: 3, name: '王五', email: 'wangwu@example.com', avatar: 'http://127.0.0.1:8080/images/seaside.jpg' }
// ];
const users = ref([]); // 用户列表
const usersTotal = ref(0); // 用户总数
const currentPage = ref(1); // 当前页码

// 一旦页面挂载成功就请求用户列表
onMounted(() => {
  fetchUsers();
});
// 监听current-page页码的变化触发fetchUsers
// 这样可以实现分页功能
watch(currentPage, (newPage) => {
  console.log('当前页码:', newPage);
  fetchUsers();
});

const fetchUsers = async () => {
  // 这里可以使用axios或fetch来请求后端API，获取用户列表
  const userListUrl = apiUris.baseUrl.userList + '?page='+currentPage.value+'&limit=10';
  console.log('请求用户列表的URL:', userListUrl);
  const req = new request(userListUrl);
  try {
    const res = await req.doGet();
    // users.value = fetchedData;
    console.log('用户列表请求成功:', res);
    if (res && res.data) {
      // 返回数据格式是 {"code":0, "data": {"users": [...]}, "total": 1000}
      users.value = res.data.users; // 假设返回的数据格式是 { data: [...] }
      usersTotal.value = res.data.total; // 假设返回的数据格式是 { total: 1000 }
      // 如果users中元素的avatar属性为空，将其设置为默认值
      users.value.forEach(user => {
        if (!user.avatar) {
          user.avatar = '/images/country0x0.jpg';
        }
      });
    } else {
      console.error('用户列表数据格式不正确:', res);
    }
  } catch (error) {
    console.error('请求用户列表失败:', error);
  }

};

</script>
<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
/* 更改分页div样式 */
.pagination-container  {
  /* 使得分页组件居中展示 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
/* 使得分页组件的选中项的背景颜色为绿色 */
::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #67C23A; /* 绿色背景 */
  border-color: #67C23A; /* 绿色边框 */
  color: #FFFFFF; /* 白色字体 */
}
</style>